<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<link href="${root}/static/css/treeview.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/treeview.min.js"></script>
<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
</head>
<body>
	<div id="app" class="container-fluid">
		<div class="col-md-2" style="margin-top: 20px">
			<input type="text" v-model="urname" @keyup="search()"
				placeholder="请输入姓名关键字" class="form-control" />
		</div>
		<table class="table">
			<caption>员工列表</caption>
			<thead>
				<tr>
					<th>编号</th>
					<th>员工登录名</th>
					<th>员工姓名</th>
					<th>员工职位</th>
					<th>员工状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.items">
					<td>{{item.urid}}</td>
					<td>{{item.urname}}</td>
					<td>{{item.urnamezh}}</td>
					<td>{{item.urenamezh}}</td>
					<td>{{item.urstatuszh}}</td>
					<td><a @click="manage(item)"><button class="btn btn-info">管理</button></a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="6">
						<ul class="pagination">
							<li><a href="javascript:void(0);" @click="list(1)">&laquo;</a></li>
							<li><a href="javascript:void(0);"
								@click="list(pager.begin-pager.step)">&larr;</a></li>
						</ul>
						<ul class="pagination" v-for="n in pager.end+1-pager.begin">
							<li :class="pager.begin+n-1==pager.index?'active':''"><a
								href="javascript:void(0);" @click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
							</li>
						</ul>
						<ul class="pagination">
							<li><a href="javascript:void(0);"
								@click="list(pager.begin+pager.step)">&rarr;</a></li>
							<li><a href="javascript:void(0);" @click="list(pager.page)">&raquo;</a></li>
						</ul>
					</td>
				</tr>
			</tfoot>
		</table>
		<div id="mymodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">标题</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" action="" onsubmit="return false"
							method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">用户名:</label>
								<div class="col-sm-4">
									<input type="text" id="urname" readonly="readonly"
										class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">员工姓名:</label>
								<div class="col-sm-4">
									<input type="text" id="urnamezh" readonly="readonly"
										class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择员工角色:</label>
								<div class="col-sm-4">
									<select id="urreid" class="form-control" v-model="reid">
										<option v-for="role in roles" v-if="role.reid != 1"
											:value="role.reid">{{role.renamezh}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="hidden" id="urid" value="" /> <input
										type="submit" class="btn btn-default" value="确定"
										@click="save()" /> <input type="button" data-dismiss="modal"
										class="btn btn-default" value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				index : 1,
				size : 5,
				step : 10,
				pager : {},
				urname : "",
				roles : {},
				title : "",
				urid : "",
				reid : ""
			},
			methods : {
				list : function(index) {
					var self = this;
					self.index = index;
					var url = "${root}/manage/user/userlist?urname="
							+ self.urname + "&sta=101&index=" + self.index
							+ "&size=" + self.size + "&step=" + self.step;
					axios.get(url).then(function(res) {
						if(res.data.code=="500"){
							alert(res.data.message);
						}else{
							self.pager = res.data;
						}
					});
				},
				search : function() {
					var self = this;
					self.index = 1;
					self.list(self.index);
				},
				getRoles : function() {
					var self = this;
					var url = "${root}/manage/user/rolelist";
					axios.get(url).then(function(res) {
						self.roles = res.data;
					});
				},
				manage : function(user) {
					var self = this;
					self.title = "用户角色关联";
					self.urid = user.urid;
					self.reid = user.urreid;
					$("#urname").val(user.urname);
					$("#urnamezh").val(user.urnamezh);
					$("#mymodal").modal('show');
				},
				save : function() {
					var self = this;
					var url = "${root}/manage/user/update";
					var fd = new FormData();
					fd.append("urid", self.urid);
					fd.append("urreid", self.reid);
					fd.append("urname", $("#urname").val());
					fd.append("urnamezh", $("#urnamezh").val());
					axios.post(url, fd).then(function(res) {
						alert(res.data.message);
						$("#mymodal").modal("hide");
						self.list(self.index);
					});
				},
			},
			mounted : function() {
				this.list(this.index);
				this.getRoles();
			}
		})
	</script>
</body>
</html>